<template>
	<view>
		<!-- 标题 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#333" size="50"></u-icon>
			<text>穿衣科普</text>
		</view>
		<!-- 内容 -->
		<view class="section">
			<!-- 发布人 -->

			<view class="nickname">

			</view>
			<!-- 详情 -->
			<view class="detial" >
				<text style="font-size:42rpx">{{title}}</text>
				<!-- src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/feverde.png" -->
				<!-- <image :src="cover" mode=""></image> -->
				<view>
					<u-read-more ref="uReadMore">
						<!-- <u-parse :html="content" @load="parseLoaded"  :toggle="true"></u-parse> -->
						<!-- <slot-one> 也可以应用小儿退热贴，贴在孩子的脑门处也能够起到物理降温的作用。                      
					  如果体温超过了38.5度这种症状是属于高烧的状态，可以给孩子服用布洛芬进行退烧，
					  然后及时的到正规的医院挂号就诊，查明具体的病情和病因，给予针对性的治疗。
					  孩子身体发烧主要是由于体内有炎症，有可能是细菌感染或者是病毒感染，
					  也有可能是支原体感染以及衣原体感染引起的身体发烧，一定要查明原因积极的治疗，
					  在此期间一定要给孩子多喝温开水，可以</slot-one> -->
						<rich-text   :nodes="htmlNodes"></rich-text>
					</u-read-more>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import htmlParser from '@/common/js/html-parser.js'
	export default {
		data() {
			return {
				content: `孩子在日常的生活里出现了发烧的症状，首先要测量宝宝的体温，如果体温低于38.5度这种症状可以通过物理降温的方法进行退烧。可以应用温热的湿毛巾擦拭孩子的腋窝和大血管走行处，能够起到物理降温的作用。 `,
				id: '',
				banner: {},
				title: '',
				cover: 'https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/feverde.png',
				htmlNodes: [],
				startX:0
			}
		},
		onLoad(event) {
			// TODO 后面把参数名替换成 payload
			this.id = event.id;

			this.getDetail();
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		    }
		    return {
		        title: '邀请您使用知冷暖幼儿穿衣宝！', //分享的名称
		        path: '/pages/Parenting/ParentingDetails/ParentingDetails?id='+this.id,
		        mpId:'wxa6957e2a04b35cb3' //此处配置微信小程序的AppId
		    }
		},
		//分享到朋友圈
		onShareTimeline(res) {
		    return {
		        title: '邀请您使用知冷暖幼儿穿衣宝！',
		        type: 0,
		        summary: "",
		    }
		},
		methods: {
			touchStart: function(e) {
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX = e.touches[0].clientX;
				}
			},
			/**
			 * 触摸结束
			 * @param {Object} e
			 */
			touchEnd: function(e) {
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					let diff = endX - this.startX;
					if (Math.abs(diff) > 20) {
						if (diff > 0) {
							console.log("左滑...");
								this.navigateBack()
						} else {
						
							console.log("右滑...");
						}
					}
				}

			},
			async getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let tbl_param = {
					id: this.id
				}
				let res = await this.$api.articlesDetail(tbl_param);
				// res = this.zutil.formatAxiosData(res);
				uni.hideLoading();
				if (res.code == 200) {
					var htmlString = res.result.content.replace(/\\/g, "").replace(/<img/g,
						"<img style=\"display:none;\"");

					if (res && res.result && res.result.hasRead) {
						this.showAllFlag = true;
					}
					const htmlNodes = htmlParser(htmlString);
					if(htmlNodes.length){
						htmlNodes.forEach(ele=>{
							if(ele.attrs ){
								console.log(ele.attrs,88)
								ele.attrs.style+='font-size:20px;'
							}
						})
						this.htmlNodes = htmlNodes
					}
					this.title = res.result.title;
					this.cover = res.result.cover;
				
				
				} else {

					uni.showToast({
						title: res.message || '获取最后新闻详情失败'
					});
				}
			},
			navigateBack() {
				uni.switchTab({
					url: '../Parenting'
				})
			},
			parseLoaded() {
				this.$refs.uReadMore.init();
			}
		}
	}
</script>

<style scoped lang="scss">
	// 头部
	.navbar {
		padding-top: 90rpx;
		padding-bottom: 40rpx;
		width: 750rpx;
		color: #333;
		background-color: rgb(68, 92, 223);
		position: fixed;
		top: 0;
		z-index:999
	}
	// .navbar {
	// 	padding-top: 100rpx;
	// 	padding-bottom: 40rpx;
	// 	width: 750rpx;
	// 	color: #333;
	// 	position: fixed;
	// 	z-index: 998;
	// }

	.navbar>text {
		font-size: 36rpx;
		padding-left: 220rpx;
		font-weight: bold;
	}

	// 内容
	.section {
		padding: 30rpx;
		margin-top:160rpx
	}

	.detial>text {
		font-size: 36rpx;
		font-weight: bold;
	}

	.detial>view {
		margin-top: 30rpx;
		text-indent: 1rem;
	}

	.detial>image {
		width: 100%;
		height: 300rpx;
		margin-top: 30rpx;
	}
	.fonts{
		font-size: 40px !important;
	}
</style>
